<template>
  <div class="content-model" style="padding: 20px">
    <el-card>
      <div slot="header">
        <h2>Banner列表</h2>
      </div>
      <el-row>
        <el-col class="flexCenter" :span="8">
          <span>名称:</span>
          <el-input
            clearable
            size="small"
            class="bot"
            v-model.trim="search.title"
            placeholder="输入查询的banner名称"
          ></el-input>
        </el-col>
        <el-col class="flexCenter" :span="8">
          <span>编辑时间:</span>
          <div class="bot">
            <el-date-picker
              style="width: 200px"
              size="small"
              @change="selectTime"
              placeholder="选择编辑时间"
              v-model="search.gmtModified"
              type="datetime"
            ></el-date-picker>
          </div>
        </el-col>
        <el-col :span="6">
          <span>状态:</span>
          <el-select
            @change="selectStatus"
            size="small"
            clearable
            v-model="search.showStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="item in goodsStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col style="text-align: right" :span="2">
          <el-button size="small" type="primary" @click="doSearch"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top: 20px">
      <div slot="header">
        <el-button size="large" style="width: 100px" type="primary" @click="add"
          >新增+</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        :data="goodsList"
        border
        :fit="true"
        style="width: 100%"
      >
        <el-table-column
          fixed
          align="center"
          label="序号"
          type="index"
          width="50"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="title"
          label="名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="picUrl"
          label="图片"
          style="text-align: center"
        >
          <template slot-scope="scope">
            <img :src="scope.row.picUrl" alt />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="price_now"
          label="展示时间"
          width="160"
        >
          <template slot-scope="scope"
            >{{ scope.row.showTime | timeFilter }} -
            {{ scope.row.hideTime | timeFilter }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="showOrder"
          label="排序"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="time"
          label="创建/修改时间"
          width="160"
        >
          <template slot-scope="scope"
            >{{ scope.row.gmtCreate | timeFilter }} -
            {{ scope.row.gmtModified | timeFilter }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="showStatus" label="状态">
          <template slot-scope="scope">
            {{ scope.row.showStatus == "0" ? "已启用 " : "已禁用" }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="160">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.showStatus == '0'"
              @click="enAble(scope.row)"
              type="primary"
              size="small"
              >禁用</el-button
            >
            <el-button
              v-else
              @click="open(scope.row)"
              type="primary"
              size="small"
              >启用</el-button
            >
            <el-button @click="edit(scope.row.id)" type="warning" size="small"
              >编辑</el-button
            >
            <br />
            <el-button
              style="margin-top: 10px"
              @click="detail(scope.row.id)"
              type="primary"
              size="small"
              >查看</el-button
            >
            <el-button
              @click="goDel(scope.row.id)"
              plain
              type="danger"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import modelApi from "@/api/lejv/banner";
import axios from "axios";
import _ from "lodash"; //引入lodash
export default {
  name: "Model",
  filters: {
    timeFilter(times) {
      let timer = new Date(times).toJSON();
      return new Date(new Date(timer).getTime() + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
  },
  data() {
    return {
      search: {
        title: "",
        gmtModified: "",
        showStatus: "",
      },
      loading: false,
      goodsStatus: [
        {
          value: "0",
          label: "启用",
        },
        {
          value: "1",
          label: "禁用",
        },
      ],
      goodsList: [],
    };
  },
  computed: {},
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    //选择时间
    selectTime(e) {
      let newTime = new Date(e);
      this.search.gmtModified = newTime.toJSON();
      // console.log(this.search.gmtModified);
    },
    //搜索
    doSearch() {
      this.getList();
    },
    //获取banner
    getList() {
      this.loading = true;
      let params = this.search;
      params = _.pickBy(params, (item) => item); //使用lodash进行过滤参数为空的搜索条件
      if (params.gmtModified) {
        params.gmtModified = this.$options.filters["timeFilter"](params.gmtModified); //处理搜索时间
        // console.log(params.gmtModified);
      }
      modelApi
        .getBannerList(params)
        .then((res) => {
          // console.log(res);
          this.loading = false;
          this.goodsList = res.data;
        })
        .catch((res) => {
          // console.log(res);
          // if(res.code != 401 && res.code != 403 && res.code != 500){
          //   this.$message({
          //     type: "error",
          //     message: "获取数据失败!",
          //   });
          // }
          this.loading = false;
        });
    },
    //添加
    add() {
      this.$router.push("/content/add");
    },
    //禁用
    enAble(val) {
      this.$confirm("将禁用该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: val.id,
            bannerStatus: "1",
          };
          modelApi.updataStatus(data).then((res) => {
            // console.log(res);
            if (res.msg == "success")
              this.$message({
                type: "success",
                message: "操作成功!",
              });
            this.getList();
          }).catch(res=>{
              this.$message({
                type: "error",
                message: "操作失败,请刷新后重试!",
              });
            })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作!",
          });
        });
    },
    //启用
    open(val) {
      this.$confirm("将启用该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: val.id,
            bannerStatus: "0",
          };
          // 判断当前时间是否在展示时间段,若不在则无法启用
          let currentTime = new Date();
          let customTime = this.$options.filters["timeFilter"](val.hideTime);
          customTime = customTime.replace("-", "/"); //替换字符，变成标准格式
          customTime = new Date(Date.parse(customTime));
          if (currentTime > customTime) {
            this.$message({
              type: "warning",
              message: "不在展示时间段内,请修改展示时间!",
            });
          } else {
            modelApi.updataStatus(data).then((res) => {
              // console.log(res);
              if (res.msg == "success")
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
              this.getList();
            }).catch(res=>{
              this.$message({
                type: "error",
                message: "操作失败,请刷新后重试!",
              });
            })
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作!",
          });
        });
    },
    //编辑
    edit(editId) {
      this.$router.push({ name: "Edit", params: { editId } });
    },
    //查看
    detail(detailId) {
      // console.log(obj);
      this.$router.push({ name: "Detail", params: { detailId } });
    },
    //删除
    goDel(id) {
      this.$confirm("此从列表中删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          modelApi
            .delBanner(id)
            .then((res) => {
              console.log(res);
              if (res.msg == "success") {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getList();
              }
            })
            .catch((res) => {
              this.$message.error("删除失败,请刷新后重试!");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除!",
          });
        });
    },
    //选择状态
    selectStatus(val) {
      // console.log(val);
      this.search.showStatus = val;
    },
  },
};
</script>

<style scoped lang="scss">
.content-model {
  img {
    width: 50px;
    height: 50px;
    object-fit: contain;
  }
  h2 {
    margin: 0;
  }
  span {
    font-size: 14px;
  }
  .flexCenter {
    display: flex;
    align-items: center;
  }
  .bot {
    width: 200px;
    margin-left: 5px;
  }
  .el-select {
    width: 150px;
    margin-left: 5px;
  }
}
</style>
